<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :span-method="arraySpanMethod"
  >
    <el-table-column
      label="名称"
      width="180"
    ><template v-slot="scope">
      <span style="font-weight: bold;">{{ scope.row.name }}</span>
    </template>
    </el-table-column>
    <el-table-column
      label="内容"
    ><template v-slot="scope">
      <span v-if="scope.$index<=2" style="font-weight: bold;">{{ scope.row.desc }}</span>
      <div v-else-if="scope.$index===3">
        <el-checkbox v-model="scope.row.checked1">测试创建位置、编号正确</el-checkbox>
      </div>
      <div v-else-if="scope.$index===4">
        <el-checkbox v-model="scope.row.checked1">测试电压正确</el-checkbox>
      </div>
      <div v-else-if="scope.$index===5">
        <el-checkbox v-model="scope.row.checked1">数据合格后分、合闸各5次，重合闸、分合分各两次</el-checkbox>
      </div>
      <div v-else-if="scope.$index===6">
        <el-checkbox v-model="scope.row.checked1">油缓冲紧固达到力矩要求并做防松标记</el-checkbox>
        <el-checkbox v-model="scope.row.checked2">拆卸传感器</el-checkbox>
      </div>
      <div v-else-if="scope.$index===7">
        <el-radio v-model="scope.row.checked1" :label="true">不合格参数问题已解决</el-radio>
        <el-radio v-model="scope.row.checked1" :label="false">问题无法解决送往<el-input v-model="scope.row.input1" :disabled="scope.row.checked1" class="line-input" size="mini" />工位解决 </el-radio>
        <br>
        无法解决问题记录<el-input v-model="scope.row.input2" class="line-input-long" size="mini" />
      </div>
    </template>
    </el-table-column>
    <el-table-column
      label="A"
      width="180"
    >
      <template v-slot="scope">
        <span style="font-weight: bold;"><el-input v-model="scope.row.A" size="small" placeholder="请输入内容" /></span>
      </template>
    </el-table-column>
    <el-table-column
      label="B"
      width="180"
    >
      <template v-slot="scope">
        <span style="font-weight: bold;"><el-input v-model="scope.row.B" size="small" placeholder="请输入内容" /></span>
      </template>
    </el-table-column>
    <el-table-column
      label="C"
      width="180"
    >
      <template v-slot="scope">
        <span style="font-weight: bold;"><el-input v-model="scope.row.C" size="small" placeholder="请输入内容" /></span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
/**
 * @Date: 2022/4/4
 */

export default {
  name: 'Question10',
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [{
        name: '机械特性测试',
        desc: '最终手测超程',
        A: '',
        B: '',
        C: ''
      }, {
        desc: '机测超程3.5±0.5mm',
        A: '',
        B: '',
        C: ''
      }, {
        desc: '机测开距8±1mm',
        A: '',
        B: '',
        C: ''
      }, {
        checked1: false
      }, {
        checked1: false
      }, {
        checked1: false
      }, {
        checked1: false,
        checked2: false
      }, {
        checked1: true,
        input1: '',
        input2: ''
      }]
    }
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        if (!this.startWatchFlag) return
        let flag = false
        const rt = {}
        for (let i = 1; i <= 3; i++) {
          rt[`input${i}_1`] = newVal[i - 1].A
          rt[`input${i}_2`] = newVal[i - 1].B
          rt[`input${i}_3`] = newVal[i - 1].C
        }
        let nd = newVal[3]
        if (nd.checked1) {
          rt['check1'] = '√'
        } else {
          flag=true
          rt['check1'] = '□'
        }
        nd = newVal[4]
        if (nd.checked1) {
          rt['check2'] = '√'
        } else {
          flag=true
          rt['check2'] = '□'
        }
        nd = newVal[5]
        if (nd.checked1) {
          rt['check3'] = '√'
        } else {
          flag=true
          rt['check3'] = '□'
        }
        nd = newVal[6]
        if (nd.checked1) {
          rt['check4_1'] = '√'
        } else {
          flag=true
          rt['check4_1'] = '□'
        }
        if (nd.checked2) {
          rt['check4_2'] = '√'
        } else {
          flag=true
          rt['check4_2'] = '□'
        }
        if (nd.checked2) {
          rt['check4_2'] = '√'
        } else {
          flag=true
          rt['check4_2'] = '□'
        }
        nd = newVal[7]
        if (nd.checked1) {
          rt['check5_1'] = '√'
          rt['check5_2'] = '□'
        } else {
          rt['check5_1'] = '□'
          rt['check5_2'] = '√'
        }
        rt['position'] = nd.input1
        rt['problem'] = nd.input2
        for (let i = 1; i <= 3; i++) {
          if (rt[`input${i}_1`] === '' || rt[`input${i}_2`] === '' || rt[`input${i}_3`] === '') {
            flag = true
          }
        }
        if (flag) {
          rt.fe = '未填写完整'
        } else {
          rt.fe = ''
        }
        this.$emit('change', rt)
      },
      deep: true
    }
  },
  created() {
    if (Object.keys(this.modelValue).length === 0) {
      this.$emit('change', { 'input1_1': '', 'input1_2': '', 'input1_3': '', 'input2_1': '', 'input2_2': '', 'input2_3': '', 'input3_1': '', 'input3_2': '', 'input3_3': '', 'check1': '□', 'check2': '□', 'check3': '□', 'check4_1': '□', 'check4_2': '□', 'check5_1': '√', 'check5_2': '□', 'position': '', 'problem': '' })
    } else {
      for (let i = 1; i <= 3; i++) {
        this.tableData[i - 1].A = this.modelValue[`input${i}_1`]
        this.tableData[i - 1].B = this.modelValue[`input${i}_1`]
        this.tableData[i - 1].C = this.modelValue[`input${i}_1`]
      }
      if (this.modelValue['check1'] === '√') {
        this.tableData[3].checked1 = true
      }
      if (this.modelValue['check2'] === '√') {
        this.tableData[4].checked1 = true
      }
      if (this.modelValue['check3'] === '√') {
        this.tableData[5].checked1 = true
      }
      if (this.modelValue['check4_1'] === '√') {
        this.tableData[6].checked1 = true
      }
      if (this.modelValue['check4_2'] === '√') {
        this.tableData[6].checked2 = true
      }
      if (this.modelValue['check5_1'] === '√') {
        this.tableData[7].checked1 = true
      } else {
        this.tableData[7].checked1 = false
      }
      this.tableData[7].input1 = this.modelValue['position']
      this.tableData[7].input2 = this.modelValue['problem']
    }
    this.startWatchFlag = true
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return [8, 1]
        } else {
          return [0, 0]
        }
      }
      if (rowIndex >= 3) {
        if (columnIndex === 1) {
          return [1, 4]
        } else {
          return [0, 0]
        }
      }
    },
    pprint(x) {
      console.log(x)
    }
  }

}
</script>

<style lang="scss" scoped>
.line-input{
  margin: 0 4px;
  padding:0;
  width:72px;
  height:16px;
  line-height: 16px;
  border-radius: 0!important;
  ::v-deep > input{
    font-weight: bold;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-size:12px;
    height:100%;
    line-height:100%;
    padding:0;
    border-radius: 0!important;
  }
}
.line-input-long{
  margin: 0 4px;
  padding:0;
  width:472px;
  height:16px;
  line-height: 16px;
  border-radius: 0!important;
  ::v-deep > input{
    font-weight: bold;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-size:12px;
    height:100%;
    line-height:100%;
    padding:0;
    border-radius: 0!important;
  }
}
</style>
